<template>
  <div>
    <Header
      v-if="
        $route.query.title == '单词库' ||
          $route.query.backName == 'naturalSpell'
      "
      :isGoBack="false"
    >
      <template v-slot:left>
        <span>单词库 <i class="el-icon-arrow-right"></i> 记忆追踪</span>
      </template>
      <template v-slot:right>
        <div class="btn" v-if="$route.query.isReturn" @click="goMemory">
          返回记忆模块
        </div>
        <div class="btn" @click="goStudyIndex">返回学习中心</div>
      </template>
    </Header>
    <Header v-else-if="$route.query.title == '体验生词库'" :isGoBack="false">
      <template v-slot:left>
        <span>体验生词库 <i class="el-icon-arrow-right"></i> 记忆追踪</span>
      </template>
      <template v-slot:right>
        <div class="btn" v-if="$route.query.isReturn" @click="goMemory">
          返回记忆模块
        </div>
        <div class="btn" @click="goStudyIndex">返回学习中心</div>
      </template>
    </Header>
    <Header v-else>
      <template v-slot:right>
        <div class="btn" v-if="$route.query.isReturn" @click="goMemory">
          返回记忆模块
        </div>
      </template>
    </Header>
    <div class="test-center w1200">
      <!-- v-model="checkedTabs" -->
      <el-tabs
        tab-position="left"
        type="card"
        v-if="
          $route.query.title == '单词库' || $route.query.title == '体验生词库'
        "
      >
        <el-tab-pane
          lazy
          label="今日生词"
          v-if="$route.query.title == '体验生词库'"
        >
          <ExperienceTableData :type="0" :bookId="600"></ExperienceTableData>
        </el-tab-pane>
        <el-tab-pane
          lazy
          label="整体复习"
          v-if="$route.query.title == '体验生词库'"
        >
          <ExperienceTableData :type="1" :bookId="600"></ExperienceTableData>
        </el-tab-pane>
        <el-tab-pane
          v-for="item in gradeList"
          :key="item.id"
          lazy
          :label="item.name"
        >
          <TableData
            :type="item.id"
            :bookId="checkedBookData.book_id"
          ></TableData>
        </el-tab-pane>
      </el-tabs>
      <el-tabs tab-position="left" type="card" v-else>
        <el-tab-pane lazy label="今日生词">
          <NewAddTableData
            :type="0"
            :bookId="checkedBookData.book_id"
          ></NewAddTableData>
        </el-tab-pane>
        <el-tab-pane lazy label="整体复习">
          <NewAddTableData
            :type="1"
            :bookId="checkedBookData.book_id"
          ></NewAddTableData>
        </el-tab-pane>
        <el-tab-pane
          lazy
          :label="$route.query.backName ? `见词能读` : `智能记忆`"
        >
          <TableData :type="0" :bookId="checkedBookData.book_id"></TableData>
        </el-tab-pane>
        <el-tab-pane lazy label="智能词听" v-if="!$route.query.backName">
          <TableData :type="1" :bookId="checkedBookData.book_id"></TableData>
        </el-tab-pane>
        <el-tab-pane
          lazy
          :label="$route.query.backName ? `听音能写` : `智能听写`"
        >
          <TableData :type="2" :bookId="checkedBookData.book_id"></TableData>
        </el-tab-pane>
        <el-tab-pane lazy label="智能默写" v-if="!$route.query.backName">
          <TableData :type="3" :bookId="checkedBookData.book_id"></TableData>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import Header from "@/components/Header";
import TableData from "./TableData";
import NewAddTableData from "./NewAddTableData.vue";
import ExperienceTableData from "./experienceTableData.vue";
import { getUnitList, getExperienceUnit } from "@/api/index";
import { getGradeList } from "@/api/individuationRead.js";
export default {
  data() {
    return {
      checkedBookData: null,
      unitList: [],
      gradeList: [],
    };
  },
  components: {
    Header,
    TableData,
    NewAddTableData,
    ExperienceTableData,
  },
  methods: {
    goMemory() {
      this.$router.push({
        name: "memory",
        query: this.$route.query,
      });
    },
    goStudyIndex() {
      if (this.$route.query.backName) {
        this.$router.push({
          name: `${this.$route.query.backName}`,
        });
        return;
      }
      if (this.$route.query.title == "体验生词库") {
        this.$router.push({
          name: `experientialStudyCenter`,
        });
        return;
      }
      this.$router.push({
        name: "wordBankCenter",
      });
    },
    async getExperienceUnit() {
      let res = await getExperienceUnit();
      let data = res.data.unit[0];
      const resArr = data.filter((item) => {
        const filterArr = res.data.all[0].filter(
          (item1) => item1.unitId == item.id
        );
        if (filterArr[0]) {
          return true;
        } else {
          return false;
        }
      });
      this.gradeList = resArr;
    },
    async getGradeList() {
      let type = null;
      if (this.checkedBookData.book_id == 585) type = 0;
      if (this.checkedBookData.book_id == 586) type = 1;
      let { data } = await getGradeList({ type });
      console.log(data, "data");
      this.gradeList = data;
      // this.checkedUnit = data[0].id
      // this.groupUnit(this.gradeList[0].id)
    },
    getUnitList() {
      let params = {
        bookId: this.checkedBookData.book_id,
      };
      getUnitList(params).then((res) => {
        if (res.code == 200 && res.data) {
          this.unitList = res.data;
          console.log(this.unitList, "this.unitList");
        }
      });
    },
    goTest() {
      this.$confirm("进入水平测试", "提示", {
        confirmButtonText: "极速模式",
        cancelButtonText: "普通模式",
        showClose: true,
        beforeClose: this.$beforeConfirmClose,
      })
        .then(() => {
          this.$router.push({
            name: "quickTest",
          });
        })
        .catch(() => {
          this.$router.push({
            name: "generalTest",
          });
        });
    },
    goTestRecord() {
      this.$router.push({
        name: "testRecord",
      });
    },
  },
  created() {
    this.checkedBookData = JSON.parse(localStorage.getItem("bookData"));
    if (this.$route.query.title == "单词库") {
      this.getGradeList();
    }
    if (this.$route.query.title == "体验生词库") {
      this.getExperienceUnit();
    }
  },
  mounted() {},
};
</script>
<style>
.el-tabs__item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
